<template>
    <div class="logincom">
       <fieldset>
        <div class="center">
            <!-- submit.prevent:阻止提交事件的刷新页面 -->
        <form @submit="login()">
            <h1>登录界面</h1>
            <p><i class="icon-yonghu-copy"></i><input type="text" placeholder="账号" required v-model.lazy.trim="username"></p>
            <p><i class="iconfont icon-a221yonghu_mima_yuechi-copy"></i><input type="password" placeholder="密码" required v-model.lazy.trim="pwd"></p>
            <p>
                <!-- 可选功能，如果勾选，在浏览器内保存上一次的登录账号和密码：如果没有勾选，不保存登录信息的同时还需要清除上一次记录的数据 -->
                <input type="checkbox" v-model="isRem" style="width:20px;height:15px">
                <span>记住密码</span>
            </p>
            <p>
                <!-- 这两个按钮在form标签内的时候都只执行提交submit事件 -->
                <input type="submit" value="登录">
                <!-- <button>在form标签内的时候</button> -->
            </p>
        </form>
        <button @click="re()">注册账号</button>
        </div>
       </fieldset>
    </div>
</template>

<!--脚本-->
<script>
import font from "@/assets/font/iconfont/iconfont.css"
export default {
    name:"LoginCom",
    // 存储组件的数据
    data(){
        return{
            font,
            username:'', //用v-model将输入框的value值给username变量
            pwd:'',
            isRem:false, //false:默认不勾选
        }
    },
    mounted(){
        // 上一次登录时记住密码的状态
        let isremeber=localStorage.getItem('loginRem');
        console.log(isremeber);
        
        // 判断上一次记住密码
        // if(isremeber=='ture'){
        //     // 上一次记住密码，从存储内存提取上一次的数据
        //     this.username=localStorage.getItem('loginuser');
        //     this.pwd=localStorage.getItem('loginpwd');
        //     this.isRem=true;
        // }else{
        //     // 上一次没有记住密码，不显示数据
        //     this.username='';
        //     this.pwd='';
        //     this.isRem=false;
        // }
        this.username=isremeber=='true'?localStorage.getItem('loginuser'):'';
        this.pwd=isremeber=='true'?localStorage.getItem('loginpwd'):'';
        this.isRem=isremeber=='true'?true:false;
    },
    // 存储事件函数
    methods:{
        // 登录函数:从vuex里面获取注册的数据；根据手机号码/邮箱和密码查找对应的用户、完成登录并存储信息
        login(){
            const user =[
                {username:'admin1',pwd:123456},
                {username:'admin2',pwd:987654},
                {username:'admin3',pwd:123789},
                {username:'admin4',pwd:987321},
                {username:'admin5',pwd:654321}
            ];
            // 根据输入框输入的账号密码，如果输入的数据跟上面数组中的任意一组数组匹配，我们认为登录成功：
            // 1.记录登录状态到本地存储localStorage
            // 2.跳转页面
            // user.forEach((item=>{
            //     if(item.username==this.username&&item.pwd==this.pwd){
            //         sessionStorage.setItem('islogin');
            //         // 编辑导航
            //         this.$router.push('/home');
            //         // 终止循环
            //         return;
            //     }
            // }))
        //    user.forEach((item,index)=>{
        //     if(this.username==item.username&&this.pwd==item.pwd){
        //         let str=user[index];
        //         sessionStorage.setItem('user',JSON.stringify(str));
        //         this.$router.push('/home',{replace:true});
        //     }
        //    })

        // 过滤函数filter
        let result=user.filter(item=>{
            // return出过滤的条件（判断条件）
            return item.username==this.username&&item.pwd==this.pwd
        });
        console.log(result);
        // 判断是否登录成功
        if(result.length>0){
            // 在登陆成功的前提下，判断是否需要记住密码
            if(this.isRem){
                localStorage.setItem('loginuser',this.username);
                localStorage.setItem('loginpwd',this.pwd);
                localStorage.setItem('loginRem',this.isRem);
            }else{
                // 将上一次存储到本地存储的登录账号和密码、上一次记录密码的状态进行清除
                localStorage.clear()
            }
            // sessionStorage.setItem('islogin',this.username);
            // 编程式导航
            this.$router.push('home');
        }else{
            alert('登录失败')
        }
        },
        re(){
            this.$router.push('register')
        }
    }
}
</script>

<!-- 样式-->
<style scoped>
.logincom{
    width: 100%;
    height: 98vh;
    overflow: hidden;
    background: orange;
}
.logincom fieldset{
  width: 50%;
  overflow: hidden;
  margin-top: 50%;
  padding-block-end: 2%;
  top: 30%;
  left: 25%;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  background: white;
}
.center{
    overflow: hidden;
    text-align: center;
}
.center button{
    width: 200px;
    overflow: hidden;
}
</style>